<script lang="ts" setup>
import mcht from '@/api/mcht'
import { useAppStore, useHomeStore } from '@/store'
import { throttle } from '@/utils/shared.ts'

const {
  windowHeight,
  customBarHeight,
} = storeToRefs(useAppStore())

const { mchtNo, modifyStore, fileType40ImageList, fileType41ImageList, fileType42ImageList, bit10 } = storeToRefs(useHomeStore())
const ruleForm = ref()
const form = reactive({
  mchtNo: mchtNo.value,
  storeNm: '',
  storeManager: '',
})

const total = ref(0)
const page = ref(1)
const list = ref([])
const pageSize = ref(5)
const loading = ref<boolean>(false)
const end = ref<boolean>(false)

const throttledGetList = throttle(getList, 600)

async function query() {
  // list.value = []
  // end.value = false
  // getList(1)
  throttledGetList(1)
}

async function getList(p: number) {
  loading.value = true
  const { data } = await mcht.getStoreList(Object.assign(form, {
    pageNum: p,
    pageSize: pageSize.value,
  }))
  loading.value = false
  if (data?.status === 'success') {
    total.value = data.data.total
    page.value = data.data.pageNum

    let lists = data.data.storeList
    lists.forEach((e) => {
      e.fristName = e.storeNm.charAt(0)
    })

    list.value = list.value.concat(lists)
    if (page.value * pageSize.value >= total.value) {
      end.value = true
    }
    else {
      end.value = false
    }
  }
}

onShow(() => {
  resetList()
  query()
})

function scrolltolower() {
  if (!end.value) {
    getList(page.value + 1)
  }
}

function modify(store: any) {
  uni.navigateTo({
    url: `/pages/home/store/input-first?mchtNo=${store.mchtNo}&storeId=${store.storeId}`,
  })
}
function close(store: any) {
  uni.showModal({
    title: '注销确认',
    content: `您是否要注销 ${store.storeNm} 该门店？`,
    success: async (res) => {
      if (res.confirm) {
        const { data } = await mcht.closeStore(mchtNo.value, store.storeId)
        if (data.status === 'success') {
          uni.showToast({
            title: data.message,
          })
          list.value = []
          page.value = 1
          await getList(1)
        }
      }
      else if (res.cancel) {
      }
    },
  })
}

function resetList() {
  list.value = []
  total.value = 0
  page.value = 1
  end.value = false
}

const popupMask = ref<boolean>(false)
const popupContainer = ref<boolean>(false)
const searchKey = ref<string>('全部')

function show_popup() {
  popupMask.value = true
  popupContainer.value = true
}

function hide_popup() {
  popupMask.value = false
  popupContainer.value = false
}

function searchList() {
  let result = [form.storeNm, form.storeManager,]
    .filter(item => item)
    .join('/');
  if (!result) {
    result = '全部'
  }
  searchKey.value = result
  resetList()
  query()
  hide_popup()
}
function clearSearchList() {
  resetForm()
  searchKey.value = '全部'
  resetList()
  query()
}

function resetForm() {
  form.storeNm = ''
  form.storeManager = ''
}
</script>

<template>
  <!-- 弹出框结构 -->
  <div class="li-popup">
    <div class="popup-mask" :class="popupMask ? 'popup-mask-show' : ''" @click="hide_popup">
    </div>
    <div class="popup-container" :class="popupContainer ? 'popup-container-show' : ''">
      <div class="popup-content">
        <div class="popup-body">
          <nut-form ref="ruleForm" :model-value="form">
            <nut-form-item label="门店名称" prop="storeNm">
              <nut-input v-model="form.storeNm" class="nut-input-text" placeholder="请输入门店名称" type="text" />
            </nut-form-item>
            <nut-form-item label="店长姓名" prop="storeManager">
              <nut-input v-model="form.storeManager" class="nut-input-text" placeholder="请输入店长姓名" type="text" />
            </nut-form-item>
          </nut-form>
          <div class="li-searchBar-btn">
            <div class="li-cz shake_o" @click="resetForm">重置</div>
            <div class="li-ss shake_o" @click="searchList">搜索</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="store">
    <div class="query">
      <div class="li-searchBar">
        <div class="li-rantangle">
          <div class="li-btnleft li-butStyle" :class="searchKey !== '全部' ? 'li-lftactive' : ''"
            @click="clearSearchList">
            <div class="li-texts">{{ searchKey }}</div>
          </div>
          <div class="li-btnright li-butStyle" :class="searchKey !== '全部' ? 'li-ritactive' : ''" @click="show_popup">筛选
          </div>
        </div>
      </div>
      <div style="width: 100%;height: 120rpx;"></div>
    </div>
    <div class="list">
      <template v-if="list.length > 0">
        <scroll-view scroll-y :style="{ height: `${windowHeight - customBarHeight - 40 - 40}px` }"
          @scrolltolower="scrolltolower">

          <div class="li-card-item shake_o shadow" v-for="(store, index) in list" :key="index">
            <div class="content-box1"
              :class="store.storeStatus === '0' ? 'b-c0' : (store.storeStatus === '2' || store.storeStatus === '5') ? 'b-c2' : 'b-c1'">
              <div class="cb-lft">
                <div class="first">{{ store.fristName }}</div>
                <div class="info">
                  <div class="name">{{ store.storeNm }}</div>
                  <div class="id">{{ store.storeId }}</div>
                </div>
              </div>
              <div class="cb-rit"
                :class="store.storeStatus === '0' ? 'c0' : (store.storeStatus === '2' || store.storeStatus === '5') ? 'c2' : 'c1'">
                {{ { 0: '正常', 2: '注销', 3: '新增', 4: '核查', 5: '拒绝' }[store.storeStatus] }}</div>
            </div>
            <div class="content-box2">
              <div class="item">
                <div class="lable">商户名称</div>
                <div class="name">{{ store.mchtName }}</div>
              </div>
              <div class="item">
                <div class="lable">商户编号</div>
                <div class="name">{{ store.mchtNo }}</div>
              </div>
              <div class="item">
                <div class="lable">店长姓名</div>
                <div class="name">{{ store.storeManager }}</div>
              </div>
              <div class="item">
                <div class="lable">店长电话</div>
                <div class="name">{{ store.storeTel }}</div>
              </div>
            </div>
            <div class="content-btn" v-if="store.mchtNo === form.mchtNo">
              <div class="c-btn" style="background-color: #2196f3"
                v-if="store.storeStatus !== '2' && store.storeStatus !== '4' && bit10[0] === '1'"
                @click="modify(store)">修改</div>
              <div class="c-btn" style="background-color: #eb0909" v-if="store.storeStatus === '0' && bit10[1] === '1'"
                @click="close(store)">注销</div>
            </div>
            <div style="padding-bottom: 10rpx;"></div>
          </div>
          <div v-if="end" class="end">没有更多数据了</div>
          <div v-if="loading" class="loading">
            <nut-icon name="loading" />
            数据加载中...
          </div>
        </scroll-view>
      </template>
      <nut-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "门店列表",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.list
  padding: 20rpx
  .item
    background-color: #fff
    border-radius: 6px
    .top
      display: flex
      justify-content: space-between
      border-bottom: 1px solid #e8e8e8
      padding: 10px 13px
      .title
        color: #8e8e8e
      .right
        color: #2196F3
    .content
      display: flex
      justify-content: space-between
      padding: 12px 18px 0
      .left
        .line
          margin-bottom: 12px
          .key
            display: inline-block
            margin-right: 12px
          .value
            display: inline-block
      .right
        .mod
          margin-bottom: 10px
  .end
    text-align: center
    color: #8e8e8e

/* 筛选按钮相关 end */
:deep(.nut-cell-group__wrap)
  box-shadow: none!important
  margin: 0!important
  padding: 10rpx 0!important

:deep(.nut-cell-group .nut-cell::after)
  border-bottom: none
</style>
